<template>
  <div class="api-info-out">
    <div class="api-info-act">
      <el-button @click="findApiInfoDo" circle size="small"
                 title="接口信息刷新">
        <el-icon>
          <Refresh/>
        </el-icon>
      </el-button>
      <el-button size="small" @click="openHandle">
        <div v-if="openFlag">全展开</div>
        <div v-else>全折叠</div>
      </el-button>
      <el-button type="primary" size="small" plain @click="downloadThisApiInfo">
        下载
        <el-icon class="el-icon--right">
          <Download/>
        </el-icon>
      </el-button>
      <el-button @click="setWriteFlag" size="small" v-if="updateFlag">
        <div v-if="writeFlag">查看</div>
        <div v-else>修改</div>
      </el-button>
    </div>

    <div class="api-info-info">
      <el-scrollbar height="92vh">
        <div id="content">
          <h2 id="api-title">{{ documentsInfo.currentApiInfo.apiInfo.apiName }}</h2>

          <el-collapse v-model="displayItems">
            <el-collapse-item :title="apiMenuTitle.apiInfo.title" name="apiInfo" :id="subMenuId.id_1">
              <api-info :api-info="documentsInfo.currentApiInfo.apiInfo" :write-flag="writeFlag" :ref="subMenuId.id_1"/>
            </el-collapse-item>

            <el-collapse-item :title="apiMenuTitle.paramFieldDesc.title" name="paramDesc" :id="subMenuId.id_2">
              <param-desc :write-flag="writeFlag" :desc-vo="this.documentsInfo.currentApiInfo.apiParamDescVo"
                          v-if="this.documentsInfo.currentApiInfo.apiParamDescVo" :ref="subMenuId.id_2"
                          :sub-menu="subMenu"/>
            </el-collapse-item>

            <el-collapse-item :title="apiMenuTitle.paramHis.title" name="paramHis" :id="subMenuId.id_3">
              <param-hist :write-flag="writeFlag" :param="this.documentsInfo.currentApiInfo" :ref="subMenuId.id_3"/>
            </el-collapse-item>

            <el-collapse-item :title="apiMenuTitle.business.title" name="business" :id="subMenuId.id_4">
              <h5>业务逻辑展示</h5>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import ParamDesc from "../../components/document/ParamDesc.vue"
import ParamHist from "../../components/document/ParamHist.vue"
import ApiDocConstants from "../../utils/api-utils/ApiDocConstants.js";
import {Download, Edit, Folder, Link, Plus, Refresh} from '@element-plus/icons-vue'
import ApiInfo from "../../components/document/ApiInfo.vue";
import myaxios from "../../plugs/myaxios";
import CommonUtils from "../../utils/CommonUtils";

export default {
  name: 'doc-body-all',
  components: {ApiInfo, ParamDesc, ParamHist, Edit, Folder, Link, Plus, Refresh, Download},
  props: {
    documentsInfo: {
      type: Object,
      default: ApiDocConstants.documentsInfo
    },
    writeFlag: {
      type: Boolean,
      default: false
    },
    updateFlag: {
      type: Boolean,
      default: true
    },
    subMenu: {
      type: Object,
      default: ApiDocConstants.subMenu
    }
  },
  data() {
    return {
      displayItems: ['apiInfo', 'paramDesc', 'paramHis', 'business'],
      openFlag: false,
      apiMenuTitle: ApiDocConstants.apiMenuTitle,
      subMenuId: ApiDocConstants.subMenuId
    }
  },
  methods: {
    goToSelection(node) {
      if (!node) {
        return
      }
      if (node.val < ApiDocConstants.subMenuVal.id_1_l) {
        const element = document.getElementById(node.id)
        if (element) {
          element.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'})
        }
      } else if (node.val < ApiDocConstants.subMenuVal.id_5_l) {
        let ref = ApiDocConstants.getSubMenuRef(node.val)
        console.log(ref)
        if (ref === '') {
          return;
        }
        this.$refs[ref].goToSelection(node)
      }
    },
    openHandle() {
      if (this.openFlag) {
        this.displayItems = ['apiInfo', 'paramDesc', 'paramHis', 'business']
      } else {
        this.displayItems = []
      }
      this.openFlag = !this.openFlag
    },
    test() {
      console.log(this.$store.state.allEnum)
    },
    setWriteFlag() {
      this.$emit('custom-event', !this.writeFlag)
    },
    findApiInfoDo() {
      this.$emit('find-api-info')
    },
    downloadThisApiInfo() {
      console.log("下载文档")
      let uri = "/dist/file/download/apiInfoOne/" + this.documentsInfo.currentApiInfo.apiInfo.id + "/" + 1;
      myaxios({
        method: 'get',
        url: uri,
        responseType: 'blob', // 指定response类型为blob类型，可直接解析二进制数据
      }).then(CommonUtils.fileDownload)
    }
  }
}
</script>
<style>
.api-info-out {
  position: relative;
}

.api-info-act {
  background-color: white;
  z-index: 33;
  overflow: hidden;
  position: absolute;
  top: 8px;
  left: 30%;
}

.api-info-info {
  z-index: 2;
  margin: auto;
  width: 100vw;
  padding-top: 20px;
}

#content {
  width: 50em;
  margin: auto;
}

.el-collapse-item__header {
  font-size: 1.1em !important;
  font-weight: bold !important;
  color: #ba3925 !important;
}

#api-title {
  margin-top: 0;
  color: #ba3925;;
}

h3 {
  font-family: Avenir, Helvetica, Arial, sans-serif !important;
  text-align: left;
  color: #ba3925;
}
</style>